<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>个人中心</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            background-color: #fff;
            font-size: 0.18rem;
            padding-top: 0.5rem;
            height: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: Helvetica;
            color: #333333;
        }

        .head {
            width: 100%;
            height: 0.88rem;
            background-color: #ffffff;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
            border-bottom: 1px solid #e5e5e5;
            box-sizing: border-box;
            padding-right: 0.24rem;
        }

        .head img {
            width: 0.21rem;
            height: 0.36rem;
            margin-left: 0.26rem;
        }

        .head_title {
            font-size: 0.36rem;
            color: #333333;
        }

        .user {
            padding: 0 0 0 0.24rem;
            background-color: white;
            margin-top: 0.19rem;
        }

        .user ul li {
            font-size: 0.28rem;
            /* border-bottom: 0.01rem solid #e5e5e5; */
            height: 0.88rem;
            padding-right: 0.24rem;
            color: #333333;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
        }

        .user ul li:first-of-type {
            height: 1.59rem;
            border-bottom: 1px solid #e5e5e5;
        }

        .user ul li:nth-of-type(2) {
            height: 0.9rem;
            /* border-bottom: 0.01rem solid #e5e5e5; */
        }

        .user ul li:nth-of-type(2) img {
            width: 0.16rem;
            height: 0.36rem;
            margin-left: 0.2rem;
        }

        .user ul li:last-of-type {
            border: none;
            display: none;
        }

        .user-img {
            display: inline-block;
            height: 100%;
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
        }

        .user-img img:first-of-type {
            width: 1.3rem;
            height: 1.3rem;
            border-radius: 1.3rem;
        }

        .user-img img:last-of-type {
            width: 0.16rem;
            height: 0.3rem;
            margin-left: 0.2rem;
        }

        .user-number img {
            width: 0.41rem;
            height: 0.41rem;
        }

        .change {
            padding-left: 0.24rem;
            font-size: 0.26rem;
            background-color: #fff;
        }

        .pass {
            height: 0.88rem;
            background-color: white;
            /* border-top: 0.01rem solid #e5e5e5;
  border-bottom: 0.01rem solid #e5e5e5; */
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
            padding: 0 0.24rem 0 0;
        }

        .pass12 {
            height: 0.88rem;
            background-color: white;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
            padding: 0 0.24rem 0 0;
        }

        .blank {
            width: 100%;
            height: 0.2rem;
            background-color: #f7f7f7;
        }

        .pass img {
            width: 0.16rem;
            height: 0.3rem;
        }

        .passsaft {
            height: 0.88rem;
            background-color: white;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
            padding: 0 0.24rem;
            margin-top: 0.18rem;
        }

        .user-email {
            font-size: 0.26rem;
            color: #999999;
        }

        .user-email img {
            width: 0.16rem;
            height: 0.3rem;
        }

        .next {
            margin: auto;
            margin-top: 1.56rem;
            width: 6.9rem;
            height: 0.88rem;
            color: #181818;
            font-size: 0.26rem;
            background-color: #f7f7f7;
            background-size: cover;
            text-align: center;
            border-radius: 0.1rem;
            line-height: 0.88rem;
        }

        #user-name {
            flex: 1;
            height: 0.8rem;
            outline: none;
            border: none;
            padding-right: 0.1rem;
            text-align: right;
            color: #9a9a9a;
        }

        #commit {
            font-size: 0.28rem;
            color: orange;
        }
    </style>
</head>

<body style="padding-top: 0;">
    <div class="user">
        <ul>
            <li class="change-photo" data-flag="avatar">
                <span class="user-img">
                    <img src="../../image/avatar.png" alt="" id="user-img" data-path="" data-url="">
                    <img src="../../image/right_jintoux.png" alt="" style="width: 0.12rem;height: 0.22rem;">
                </span>
            </li>
            <li class="changeUserName">昵称
                <span>
                    <span class="userName">
                    </span>
                    <img src="../../image/right_jintoux.png" alt="" style="width: 0.12rem;height: 0.22rem;">
                </span>
            </li>
            <li>积分
                <span class="user-number">
                    <img src="../../image/my/jifen.png" alt=""> 1747
                </span>
            </li>
        </ul>
    </div>
    <div class="blank">

    </div>
    <div class="change">
        <div class="pass go-login" data-param='{"needLogin":"true","page":"common/headerwin",
            "name":"setpassword_headerwin",
            "param":{"subpage":"my/setpassword","name":"setpassword","title":"设置新密码"}}'>
            修改登录密码<img src="../../image/right_jintoux.png" alt="" style="width: 0.12rem;height: 0.22rem;">
        </div>
        <div style="display: none" class="passsaft go-page" data-param='
            {"needLogin":"true",
            "page":"common/headerwin",
            "name":"certificate_headerwin",
            "param":{"subpage":"my/certificate",
            "name":"certificate","title":"安全认证"}
            }'>
            安全认证
            <span class="user-email">
                紧急联系人邮箱
                <img src="../../image/right_jintoux.png" alt="" style="width: 0.12rem;height: 0.22rem;">
            </span>
        </div>
    </div>
    <div class="blank">

    </div>
    <div class="change">
        <div class="pass12">
            绑定手机号码
            <span class="phoneNumber"></span>
        </div>
    </div>
    <div class="next">
        退出登录
    </div>
    <script src="../../script/autosize.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/jquery_three_two_one.js"></script>
    <script src="../../script/app.js"></script>
    <script>
        apiready = function () {
            var app = new APP();
            var imgWidth = (app.W * 2) / 5;
            var imgHeight = imgWidth;
            var account = app.getAccount();
            app.handlePage();
            $("#user-img").attr("src", account.avatar).attr("data-url", account.avatar);
            $(".userName").text(account.user_name);
            $(".phoneNumber").text(account.telphone);
            $(".cancel").on("click", function () {
                $(".change-img").css({
                    display: "none"
                });
            });
            //更换头像
            $(".change-photo").click(function () {
                var thiz = this;
                app.sheet({
                    buttons: ["拍照", "相册"],
                    cancelTitle: "取消"
                }, function (ret, err) {
                    var index = ret.buttonIndex;
                    app.trigger("selectPic");
                    app.log("index", index);
                    if (index == 1) {
                        //拍照
                        app.shootPic(function (ret, err) {
                            app.log("shoot", ret);
                            // 图片裁剪
                            if (ret && ret.data) {
                                app.openImgHandle({
                                    type: "avatar",
                                    flag: $(thiz).data("flag"),
                                    srcPath: ret.data,
                                    dimension: [imgWidth, imgHeight]
                                });
                            }
                        });
                        return;
                    }
                    if (index == 2) {
                        //相册
                        app.getPic(function (ret, err) {
                            app.log("get", ret);
                            // 图片裁剪
                            if (ret && ret.data) {
                                app.openImgHandle({
                                    type: "avatar",
                                    flag: $(thiz).data("flag"),
                                    srcPath: ret.data,
                                    dimension: [imgWidth, imgHeight]
                                });
                            }
                        });
                    }
                }
                );
            });

            // 监听图片压缩成功事件
            app.listen("compress_image_success", function (ret, err) {
                app.log("压缩事件", ret);
                if (ret.value.flag && ret.value.imgUrl) {
                    var retCopy = ret;
                    // 上传图片
                    var account = app.getAccount();
                    app.uploadImg(ret.value.imgUrl, function (ret) {
                        if (ret.code == 200) {
                            if (ret.data.files) {
                                $("#user-img").attr("src", ret.data.files.url).attr("data-path", ret.data.files.path).attr("data-url", ret.data.files.url);
                            }
                        } else {
                            app.toast(ret.message);
                        }
                    })
                }
            });

            var dataParam = {
                page: "common/headerwin",
                name: "setusername_headerwin",
                param: {
                    subpage: "my/setusername",
                    name: "setusername",
                    title: "修改昵称",
                    right: "保存",
                    rightColor: "orange",
                    listenevent: "saveName",
                    username: account.user_name
                }
            };
            $(".changeUserName").on("click", function () {
                var pageValue = {
                    name: "setusername",
                    subpage: "my/setusername",
                    title: "修改昵称",
                    rightTitle: "保存",
                    param: {
                        pageName: "setusername"
                    },
                };
                app.setNavBarAttr(pageValue);
            });
            app.listen("uesrName", function (ret) {
                if (ret && ret.value) {
                    uesrName = ret.value.uesrName;
                    if (uesrName == "") {
                        $(".userName").text("矿友****");
                    } else {
                        dataParam.param.username = uesrName;
                        $(".userName").text(uesrName);
                    }
                }
            });
            $(".go-login").unbind('click').click(function () {
                var pageValue = {
                    name: "setpassword",
                    subpage: "my/setpassword",
                    title: "设置新密码",
                    // rightTitle: "保存",
                    param: {
                        pageName: "setpassword"
                    },
                };
                app.setNavBarAttr(pageValue);
            });
            $(".next").click(function () {
                // 广播注销登录事件
                app.trigger("quit_login");
                app.delAccount();
                app.closeW();
            });
            app.listen("navitembtn", function (ret) {
                var pageValue = api.pageParam;
                if (ret.type == "left") {
                    app.navigationBarClickLeft(pageValue.pageName);
                }
                if (ret.type == "right") {
                    if (!$("#user-img").data("url") && !$(".userName").text() == "") {
                        app.toast("请上传头像或输入昵称！");
                        return;
                    }
                    var account = app.getAccount();
                    app.ajaxPro({
                        url: "member/change-user-info",
                        values: {
                            token: account.token,
                            username: $(".userName").text().toString(),
                            avatar: $("#user-img").data("path")
                        },
                        openFlower: true
                    }, function (ret) {
                        if (ret.code == 200) {
                            var appSetNum = app.getAccountSet();
                            // 设置账号
                            appSetNum.userLogin.avatar = $("#user-img").attr("data-url");
                            appSetNum.userLogin.user_name = $(".userName").text().toString();
                            app.setAccount(appSetNum);
                            // 发送认证成功提交成功消息
                            app.trigger("user_edit_success");
                            app.tout(500, function () {
                                app.closeW();
                            });
                        } else {
                            app.toast(ret.message);
                            setTimeout(function (params) {
                                app.closeW();
                            }, 1500)
                        }
                    })
                }
            });
            app.listen("quit_login", function (params) {
                setTimeout(function () {
                    app.closeW();
                }, 1000)
            })
        };
    </script>
</body>

</html>